<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1" />
		<title></title>
		<script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
		<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
	</head>
	<body>
		<div class="container">
		    

			<div class="input-group mb-3">
			  <div class="input-group-prepend">
				<span class="input-group-text">温度</span>
			  </div>
			  <input type="text" id="C" class="form-control" onchange="time()" placeholder="温度" >
			</div>
			
			<div class="input-group mb-3">
			  <div class="input-group-prepend">
				<span class="input-group-text">时间</span>
			  </div>
			  <input type="text" id="showTime" class="form-control" readonly="readonly" placeholder="时间" >
			</div>
			
			<button type="button" class="btn btn-primary" onclick="save()">存储</button>
			<button type="button" class="btn btn-primary" onclick="show()">展示</button>
			<button type="button" class="btn btn-primary" onclick="remove()">清除数据</button>
			<button type="button" class="btn btn-primary" onclick="toSex()">寂寞难耐？</button>
			<!-- <button type="button" onclick="save()">存储</button> -->
			<!-- <button type="button" onclick="show()">展示</button> -->
			
			<div id="main" style="width: 100%;height:600px;"></div>
			
		</div>
	</body>
	
	<script type="text/javascript">
		var date = new Date();
		var month;
		var date_value;
		var wd = document.getElementById("C").value;
		
		
		function time(){
			month = date.getMonth()+1;
			date_value = date.getFullYear()+"年"+month+"月"+date.getDate()+"日"+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
			document.getElementById("showTime").value = date_value;
			wd = document.getElementById("C").value;
			// console.log(wd);
		}
		
		
		function save(){
			console.log(wd+"/"+date_value);
			if(wd == ""){
				alert("温度不能为空");
			}
			var ssd = {
				"wendu" : wd,
				"date_value" : date_value
			};
			
			var ssds = new Array();
			
			if(localStorage.getItem("℃") != null){
				ssds = JSON.parse(localStorage.getItem("℃"));
				ssds.push(ssd);
				localStorage.setItem("℃",JSON.stringify(ssds));
			}else{
				ssds.push(ssd);
				localStorage.setItem("℃",JSON.stringify(ssds))
			}
		}
		
		// 画图函数
		function draw(times , wds){
			var myChart = echarts.init(document.getElementById('main'));
			
			var option = {
			            title: {
			                text: '个人温度'
			            },
			            legend: {
			                data:['温度']
			            },
						tooltip:{},
			            xAxis: {
							type: 'category',
							boundaryGap: false,
							axisLabel: {  
								interval:0,  
								rotate:-45,
							},
			                data: times
			            },
			            yAxis: {
							name:'℃',
							min:35,
							max:39,
							splitNumber:0.1
						},
			            series: [{
			                name: '温度变化',
			                type: 'line',
			                data: wds
			            }]
			        };
			
			myChart.setOption(option);
		}
				
		function show(){
			if(localStorage.getItem("℃") == null){
				alert("你的本地存储还没有温度");
			}
			var arrs = new Array();
			var wds = new Array();
			var times = new Array();
			var counts =JSON.parse(localStorage.getItem("℃")).length;
			arrs = JSON.parse(localStorage.getItem("℃"));
			for(var i=0;i<counts;i++){
				wds.push(arrs[i].wendu);
				times.push(arrs[i].date_value);
			}
			console.log(times + " : " +wds);
			
			// 画图开始
			draw(times,wds);
		}
		
		function remove(){
			var re = confirm("是否清除以往温度");
			if(re){
				localStorage.removeItem("℃");
				alert("你的以往数据被清除");
				draw([],[]);
			}	
		}
		
		function toSex(){
			var result = confirm("你是不是真的寂寞难耐？");
			if(result){
				window.location.href="http://www.69auu.com";
			}else{
				confirm("哦，你真是一个真男人");
			}
		}
	</script>
</html>
